<template>
  <div id="payBox">
    <flexbox class="topBox">
        <flexbox-item align="center">
            <div class="flex-demo">
                <h1>{{chufadi}}</h1>
                <span>发货地</span>
            </div>
        </flexbox-item>
        <flexbox-item align="center">
            <div class="flex-demo">
                <img src="../assets/img/zhixiang.png">
            </div>
        </flexbox-item>
        <flexbox-item align="center">
            <div class="flex-demo shipingAddress" >
                <h1>{{shouhuodi}}</h1>
                <span>收货地</span>
            </div>
        </flexbox-item>
    </flexbox>
    <group>
        <cell title="收件人" is-link :value="receiveName">
            <img slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/img/username.png">
        </cell>
    </group>
     <group>
        <cell title="手机号码" is-link  :value="receivePhone">
            <img slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/img/phonec.png">
        </cell>
    </group>
    <group>
        <cell title="预估运费" is-link  :value="oldPrice" class="specialItem">
            <img slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/img/rmb.png">
        </cell>
    </group>
    <group>
        <cell title="支付方式" is-link  :value="payType">
            <img slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/img/qianbao.png">
        </cell>
    </group>
    <flexbox class="payBtnBox">
        <flexbox-item >
          <x-button type="primary" class="laterBtn">稍后支付</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button type="warn" class="immediatelyBtn" @click.native="showPlugin">立即支付</x-button>
        </flexbox-item>
    </flexbox>
    <p class="annotations">注:点稍后支付,可在我的寄件中完成支付</p>
    
  </div>
</template>
<script>
    import { Flexbox,FlexboxItem,Group,Cell,XButton} from 'vux'
    import store from '@/vuex/store'
    import md5 from 'js-md5'
    export default {
        data(){
            return {
                chufadi:'',
                shouhuodi:'',
                receivePhone:'',
                receiveName:'',
                price:'',
                payType:'',
                oldPrice:''
            }
        },
        components:{
            Flexbox,
            FlexboxItem,
            Group,
            Cell,
            XButton
        },
        created(){
            
            // $.ajax({
            //     url:''
            // })
        },
        mounted:function(){
            var cHeight = document.body.clientHeight;
            console.log(cHeight)
            console.log(1)
            console.log(this.$store.state.allDate)
            this.shouhuodi = this.$store.state.allDate.sendPlace;
            this.chufadi = this.$store.state.allDate.receivePlace;
            this.receiveName = this.$store.state.allDate.receiveName;
            this.receivePhone = this.$store.state.allDate.receivePhone;
            this.price = this.$store.state.allDate.money;
            this.oldPrice = this.$store.state.allDate.money/100;
            this.payType = this.$store.state.allDate.payType;
            // document.getElementById('payBox').style.height = cHeight+'px';
        },
        methods:{
            showPlugin(){
                var _this = this;
                _this.$vux.confirm.show({
                    content:'确认订单',
                    onConfirm () {
                        console.log('plugin confirm')
                        _this.$router.push('/Pay')
                    }
                })
            }
        },
        store     
    }
</script>
